import React, { useEffect } from "react";
import { CartListWrapper } from './style'
import LazyLoad from 'react-lazyload'
import { Link } from "react-router-dom";

interface CartListProps{
    homeTabData:any[];
}

const CartList:React.FC<CartListProps>=(props)=>{
const {
    homeTabData
}=props
// useEffect(()=>{
//     console.log(homeTabData[6].titleTag.length) 
// })

return(
 
    <CartListWrapper>
        {
            homeTabData[1] ===undefined?'':
 <img src={ homeTabData[1].image} alt="" />
        }   
        <div>
         {
            homeTabData[2] ===undefined?'':
              homeTabData.slice(2).map(data=>(
                <Link  to={'detail/'+data.clue_id}>
                <div className="cart-list">
                             {/* <img src='https://image1.guazistatic.com/qn2206291823477dbdde5d7e80fdf3bc2129b6c1ef7ba4.jpg?imageView2/1/w/240/h/160/q/99/format/webp'alt=""  className="tv" />
              {
                
                  <LazyLoad>
                     <img src={data.thumb_img} className="pic" 
                      onLoad={(e) => e.currentTarget.style.opacity = "1"}
                    />
                    
                  </LazyLoad>
                
              } */}
              <img src={data.thumb_img} alt="" />
                    
                     {/* {
                       data.titleTag.map((data: { icon: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; })=>
                        
                            {if(data.icon)
                            <div>{data.icon}</div>} 
                       )
                     } */}
                     
                      
                        <p className="title">{data.title}</p>
                        <div className="cart-price">
                            <p>{data.price}</p>
                        
                         {
                        Object.prototype.hasOwnProperty('first_pay')==false?<div className="first-pay">
                           <p>{data.first_pay}</p> 
                        </div>:<div></div>
                       }
                       </div>
                        
                </div>
                </Link>
                
              ))  
            }
        </div> 
    </CartListWrapper>
)
}

export default CartList